import React, { useState, useEffect } from 'react';
import { Col, Form, Input, Button, Radio, Row, Spin, Tree, message } from 'antd';
import type { TreeDataNode, DirectoryTreeProps } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import Title from 'antd/lib/typography/Title';
import { history } from 'umi';
import styles from './index.less';
import serviceUtils from '@/services/serviceUtils';
import { createInfo, camel2snake, snake2camel, sampleApi, IntlInit } from '@/services/utils';
import { ProjectUtils } from '@/services/utils';
import { IntlInitJsx } from '@/components/PPIntl';
import type { MessageApi } from 'antd/lib/message';
import type { Label } from '@/services';



const { List } = Form;

export type _PPCardProps = {
  title?: string;
  style?: React.CSSProperties;
  innerStyle?: React.CSSProperties;
  content?: string;
  docUrl?: string;
};

const _PPBlock: React.FC<_PPCardProps> = (props) => {
  return (
    <div className={styles._ppcard} style={props.style}>
      {/* <Row className={styles.titleRow} style={{ display: props.title ? undefined : 'none' }}>
    <Title className={styles.title}>{props.title}</Title>
    <div data-test-id={props.title != undefined ? 'projectDetailDoc' : ''}>
      <QuestionCircleOutlined
        style={{ fontSize: '12px' }}
        onClick={() =>
          message.info({
            content: props.content,
            onClick: () => window.open(props.docUrl),
          })
        }
      />
    </div>
  </Row> */}
      <Row style={{ marginTop: 26 }}>
        <Col
          span={24}
          style={{ paddingLeft: 30, paddingRight: 30, textAlign: 'center', ...props.innerStyle }}
        >
          {props.children}
        </Col>
      </Row>
    </div>
  );
};

export type PPCreaterProps = {
  taskCategory: string;
  imgSrc?: string;
  style?: React.CSSProperties;
  innerStyle?: React.CSSProperties;
};

const PPCreater: React.FC<PPCreaterProps> = (props) => {
  const projects = ProjectUtils(useState);
  const projectId = serviceUtils.getQueryVariable('projectId');
  const [loading, setLoading] = useState<boolean>(false);
  const [sampleFiles, setSampleFiles] = useState<TreeDataNode[]>([]);
  // const [labelFormat, setLabelFormat] = useState<string>();

  const intlJsx = IntlInitJsx('component.PPCreater');
  const intl = IntlInit('component.PPCreater');

  const saveProject = (values: any) => {
    setLoading(true);
    console.log('create_project_values', values)
    const otherSettings = {};
    if (values.segMaskType) otherSettings.segMaskType = values.segMaskType;

    if (!projectId) {
      projects
        .create({
          ...values,
          taskCategoryId: createInfo[props.taskCategory]['id'],
          otherSettings: otherSettings,
        })
        .catch((err) => {
          message.error(intl('creationFail'));
          serviceUtils.parseError(err, message);
          setLoading(false);
        })
        .then((project) => {
          if (project)
            // history.push(`/${camel2snake(props.taskCategory)}?projectId=${project.projectId}`);
            if (project.status !== 200) {
              const msgComponent: MessageApi = message;
              serviceUtils.resultError(msgComponent, project.message);
              setLoading(false);
              // setLoading(false);
            } else {
              history.push(`/welcome`)
            }

        });
    } else {
      projects.update(projectId, { ...values, otherSettings: otherSettings }).then((res) => {
        if (res.status !== 200 && res.status !== undefined) {
          const msgComponent: MessageApi = message;
          serviceUtils.resultError(msgComponent, res.message);
          setLoading(false);
        }
        else {
          message.success(res.message);
          history.push(`/welcome`)
        }

        // history.push(`/project_overview?projectId=${projectId}`);
      });
    }
  };

  const [form] = Form.useForm();

  useEffect(() => {
    projects.getGroup(projectId).then((project) => {
      const values = {
        name: project?.name,
        description: project?.description,
        dataDir: project?.data_dir,
        labelFormat: project?.label_format,
        segMaskType: project?.other_settings?.segMaskType,
      };
      console.log('values', values);
      console.log('othersettings', project?.otherSettings);
      // if (project?.labelFormat) setLabelFormat(project.labelFormat);
      form.setFieldsValue(values);
    });
  }, []);

  const { DirectoryTree } = Tree;
  const onTreeSelect: DirectoryTreeProps['onSelect'] = (keys, info) => {
    console.log('Trigger Select', keys, info, info.node.isLeaf != undefined);
    const isLeaf = info.node.isLeaf == true;
    if (isLeaf) {
      console.log('url', encodeURIComponent(info.node.key));
      window.open('/api/samples/file?path=' + encodeURIComponent(info.node.key));
    }
  };

  function getSampleFolderStructure() {
    if (sampleFiles.length == 0) {
      return <img src={props.imgSrc} style={{ width: '40rem' }} />;
    } else {
      return (
        <div>
          <div className={styles.DirectoryTitle}>{intlJsx('folderStructureSample')}</div>
          <DirectoryTree
            // defaultExpandAll
            // showLine={true}
            // showIcon={true}
            onSelect={onTreeSelect}
            treeData={sampleFiles}
            blockNode={false}
          />
          <div className={styles.DirectoryContent}>
            <div>{intlJsx('folderStructureSampleDetail')}</div>
            {/* <div>1.标注完成后，生成标注结果的组织形式ru如上所示</div>
            <div>2.若重新导入已有标注，请参加如上标注结构组织文件夹下的文件</div> */}
          </div>
        </div>
      );
    }
  }

  return (
    <div className={styles.shadow} style={props.style}>
      <Spin tip={intlJsx('importInProgress')} spinning={loading} size="large">
        <div id="left" className={styles.block_l}>
          <_PPBlock
            title={intl(props.taskCategory, 'global') + intl('project')}
            content={intlJsx('titleContent')}
            docUrl={`https://github.com/PaddleCV-SIG/PaddleLabel/blob/docs/doc/CN/project/${camel2snake(
              props.taskCategory,
            )}.md`}
            style={{ height: 760, padding: '1.25rem 0' }}
          >
            <Form
              form={form}
              layout="horizontal"
              size="large"
              style={{ marginTop: '5.69rem' }}
              onFinish={(values) => {
                saveProject(values);
              }}
            >
              <Form.Item
                name="name"
                label={intl('projectName')}
                labelCol={{
                  span: 6,
                }}
                wrapperCol={{
                  span: 16,
                }}
                rules={[
                  {
                    required: true,
                    message: intlJsx('requireProjectName'),
                  },
                ]}
                style={{ fontSize: '1.5rem' }}
              >
                <Input
                  autoComplete="off"
                  size="large"
                  placeholder={intl('anyString', 'global')}
                  style={{ height: '3.13rem' }}
                />
              </Form.Item>
              <Form.Item
                name="dataDir"
                label={intl('datasePath')}
                labelCol={{
                  span: 6,
                }}
                wrapperCol={{
                  span: 16,
                }}
                rules={[
                  {
                    required: true,
                    message: intlJsx('requireDatasePath'),
                  },
                ]}
                style={{ fontSize: '1.5rem' }}
              >
                <Input
                  autoComplete="off"
                  size="large"
                  placeholder={intl('absolutePath', 'global')}
                  style={{ height: '3.13rem' }}
                  disabled={projectId == undefined ? false : true}
                />
              </Form.Item>
              <Form.Item
                name="description"
                label={intl('description')}
                labelCol={{
                  span: 6,
                }}
                wrapperCol={{
                  span: 16,
                }}
                rules={[
                  {
                    required: false,
                  },
                ]}
                style={{ fontSize: '1.5rem' }}
              >
                <Input
                  autoComplete="off"
                  size="large"
                  placeholder={intl('anyString', 'global')}
                  style={{ height: '3.13rem' }}
                />
              </Form.Item>

              <Form.List name="labels">
                {(fields, { add, remove }) => (
                  <>
                    {fields.map(({ key, name, ...restField }) => (
                      <Form.Item
                        {...restField}
                        label={intl('labelName')}
                        required={true}
                        key={key}
                        style={{ marginBottom: 8 }}
                      >
                        <Row gutter={8}>
                          <Col span={12}>
                            <Form.Item
                              name={[name, 'label_name']}
                              noStyle
                              rules={[
                                {
                                  required: true,
                                  message: intlJsx('requireLabelName'),
                                },
                              ]}
                            >
                              <Input placeholder={intl('enterLabelName')} />
                            </Form.Item>
                          </Col>
                          {props.taskCategory !== 'classification' && ( // 根据需要替换'specific_category'
                            <Col span={12}>
                              <Form.Item
                                name={[name, 'label_color']}
                                noStyle
                                rules={[
                                  {
                                    required: true,
                                    message: intlJsx('requireColor'),
                                  },
                                ]}
                              >
                                {/* <Input placeholder={intl('enterColor')} /> */}
                                <input type='color' className={styles.colorInput} />
                              </Form.Item>
                            </Col>
                          )}
                          <Col span={24}>
                            {fields.length > 1 && (
                              <Button type="danger" size='small' onClick={() => remove(name)}>
                                {intlJsx('remove')}
                              </Button>
                            )}
                          </Col>
                        </Row>
                      </Form.Item>
                    ))}
                    <Form.Item>
                      <Button onClick={() => add()} block>
                        {intlJsx('addLabel')}
                      </Button>
                    </Form.Item>
                  </>
                )}
              </Form.List>

              <Form.Item
                wrapperCol={{
                  span: 16,
                  offset: 6,
                }}
              >
                <Button
                  htmlType="submit"
                  type="primary"
                  style={{ height: '2.5rem', width: '48%' }}
                  block
                >
                  {projectId ? intlJsx('update') : intlJsx('create')}
                </Button>
                &nbsp;&nbsp;
                <Button
                  htmlType="button"
                  style={{ height: '2.5rem', width: '48%' }}
                  block
                  onClick={() => {
                    history.goBack();
                  }}
                >
                  {intlJsx('cancel')}
                </Button>
              </Form.Item>
            </Form>
          </_PPBlock>
        </div>
        <div id="right" className={styles.block_r}>
          <_PPBlock style={{ height: '43.63rem', padding: '0.5rem 0' }}>
            {getSampleFolderStructure()}
          </_PPBlock>
        </div>
      </Spin>
    </div>
  );
};

export default PPCreater;
